[V0_FILE]typescriptreact:file="utils/colorConversions.ts" isMerged="true" import { oklch, rgb, formatHex } from 'culori'; export function oklchToRgb(l: number, c: number, h: number): string { const rgbColor = rgb(oklch({ l: l / 100, c: c / 100, h })); return rgbColor ? `rgb(${Math.round(rgbColor.r * 255)}, ${Math.round(rgbColor.g * 255)}, ${Math.round(rgbColor.b * 255)})` : 'rgb(0, 0, 0)'; } export function oklchToHex(l: number, c: number, h: number): string { return formatHex(oklch({ l: l / 100, c: c / 100, h })) || '#000000'; } export function getSpectrumColor(x: number, y: number, l: number): string { const c = x * 0.4; // Max chroma is 0.4 in OKLCH const h = y * 360; return oklchToRgb(l, c * 100, h); } export function isValidOklch(l: number, c: number, h: number): boolean { const rgbColor = rgb(oklch({ l: l / 100, c: c / 100, h })); return rgbColor !== null && rgbColor.r >= 0 && rgbColor.r <= 1 && rgbColor.g >= 0 && rgbColor.g <= 1 && rgbColor.b >= 0 && rgbColor.b <= 1; } export async function copyToClipboard(text: string): Promise { try { await navigator.clipboard.writeText(text); } catch (err) { console.error('Failed to copy text: ', err); } } export function generateColorPalette(l: number, c: number, h: number, count: number, tintStrength: number): string[] { const baseColor = oklch({ l: l / 100, c: c / 100, h }); const palette = []; const step = 1 / (count - 1); for (let i = 0; i < count; i++) { const factor = i * step; const newL = Math.max(0, Math.min(1, baseColor.l + factor * tintStrength)); const newC = Math.max(0, Math.min(0.4, baseColor.c * (1 - factor * tintStrength))); const shade = oklch({ l: newL, c: newC, h: baseColor.h }); palette.push(formatHex(shade) || '#000000'); } return palette; } export function createSvgPalette(colors: string[]): string { const svgWidth = 200; const svgHeight = 50; const rectWidth = svgWidth / colors.length; const rects = colors.map((color, index) => `` ).join(''); return ``; } [V0_FILE]typescriptreact:file="components/Slider.tsx" isMerged="true" import React from 'react'; interface SliderProps { value: number; onChange: (value: number) => void; min: number; max: number; step: number; label: string; } export function Slider({ value, onChange, min, max, step, label }: SliderProps) { return (

{label} onChange(parseFloat(e.target.value))} className="w-full" /> {value.toFixed(2)}

); } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { OKLCHColorPicker } from '../components/OKLCHColorPicker'; import { Toaster } from "@/components/ui/toaster" export default function Home() { return (

OKLCH Color Picker

); } [V0_FILE]typescriptreact:file="components/NumberInput.tsx" isMerged="true" import React from 'react'; import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" interface NumberInputProps { value: number; onChange: (value: number) => void; min: number; max: number; step: number; label: string; id: string; } export function NumberInput({ value, onChange, min, max, step, label, id }: NumberInputProps) { return (

{label} { const newValue = parseFloat(e.target.value); if (!isNaN(newValue) && newValue >= min && newValue <= max) { onChange(newValue); } }} className="w-20" />

); } [V0_FILE]typescriptreact:file="components/ColorSpectrum.tsx" isMerged="true" import React, { useRef, useEffect, useState } from 'react'; import { getSpectrumColor, isValidOklch } from '../utils/colorConversions'; interface ColorSpectrumProps { lightness: number; chroma: number; hue: number; onChange: (chroma: number, hue: number) => void; } export function ColorSpectrum({ lightness, chroma, hue, onChange }: ColorSpectrumProps) { const canvasRef = useRef(null); const [isDragging, setIsDragging] = useState(false); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; const width = canvas.width; const height = canvas.height; for (let x = 0; x < width; x++) { for (let y = 0; y < height; y++) { const c = (x / width) * 40; const h = (1 - y / height) * 360; if (isValidOklch(lightness, c, h)) { ctx.fillStyle = getSpectrumColor(x / width, 1 - y / height, lightness); } else { ctx.fillStyle = '#CCCCCC'; // Gray for invalid colors } ctx.fillRect(x, y, 1, 1); } } // Draw current color position const x = (chroma / 40) * width; const y = (1 - hue / 360) * height; ctx.beginPath(); ctx.arc(x, y, 5, 0, 2 * Math.PI); ctx.strokeStyle = lightness > 50 ? 'black' : 'white'; ctx.stroke(); }, [lightness, chroma, hue]); const handleInteraction = (e: React.MouseEvent | React.TouchEvent) => { const canvas = canvasRef.current; if (!canvas) return; const rect = canvas.getBoundingClientRect(); let x, y; if ('touches' in e) { x = e.touches[0].clientX - rect.left; y = e.touches[0].clientY - rect.top; } else { x = e.clientX - rect.left; y = e.clientY - rect.top; } const newChroma = (x / rect.width) * 40; const newHue = (1 - y / rect.height) * 360; if (isValidOklch(lightness, newChroma, newHue)) { onChange(newChroma, newHue); } }; return (

About

Tags

Share

More from yadwinder

More Templates Like This

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This